<template>

    <div class="leftView">
        <div class="shrink" @click="shows=!shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: row">
                <div class="container height600">
                    <div class="container_title1">
                        <span>产业链详情</span>
                    </div>
                    <el-scrollbar class="linksdetailContainer">
                        <div style="display: flex;flex-direction: column" v-for="(item,index) in linksdetailData"
                             :key="index">
                            <div class="container_title2">
                                <div class="container_title2_icon"></div>
                                <span>{{ item.industryName }}</span>
                                <div class="container_title2_icon"></div>
                            </div>
                            <div class="container_details">
                                <span class="container_details_title">企业：</span>
                                <div class="container_details_contentC">
                                    <!--                  item.companyNameList-->
                                    <div style="display: flex;flex-direction: row"
                                         v-for="(citem,cindex) in item.companyNameList"
                                         :key="cindex">
                                        <span class="container_details_content">{{ citem }}</span>
                                        <span class="container_details_content"
                                              v-show="cindex < item.companyNameList.length-1">、</span>
                                    </div>

                                </div>

                            </div>
                            <div class="line"></div>
                        </div>
                    </el-scrollbar>
                </div>
                <div style="display: flex;flex-direction: column">
                    <div class="container height251 marginT5"
                         :style="{'background-image':`url(${require('@/assets/bg_3_2.png')})`}">
                        <div class="container_title1">
                            <span>园区产业分布</span>
                        </div>
                        <div class="detailsStyle" ref="detailsEcharts"></div>
                    </div>
                    <div class="container height351"
                         :style="{'background-image':`url(${require('@/assets/bg_3_3.png')})`}">
                        <div class="container_title1 marginB20">
                            <span>园区企业税收列表</span>
                        </div>
                        <el-scrollbar class="taxrevenue_scrollbar" v-if="annualincomeData.length>0">
                            <div class="container_taxrevenue" v-for="(item) in annualincomeData" :key="item">
                                <span class="container_taxrevenue_name">{{ item.companyName }}</span>
                                <div class="container_taxrevenue_base">
                                    <div class="container_taxrevenue_all"
                                         style="z-index: 1; background: #ffffff;opacity: 0.1;width: 100%"></div>
                                    <div class="container_taxrevenue_all"
                                         style="z-index: 2;background: linear-gradient(-90deg, #00FCFF, #28B1FF);"
                                         :style="{width:(item.annualIncome/maxAnnualIncome*100)+'%'}"
                                    ></div>
                                </div>
                            </div>
                        </el-scrollbar>
                        <div class="dataAvailable" v-else>
                            暂无数据
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>

import * as echarts from "echarts";
import {linksdetail, annualincome, industrypark} from "@/api/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            linksdetailData: [],//产业链详情列表
            annualincomeData: [],//税收列表
            maxAnnualIncome: [],//税收最大值
            industryparkData: [],//产业分布
            industryparkTotal: 0,//产业分布总数
            industryparkxAxisData: [],//产业分布横向数据
            shows: true
        }
    },
    props: {
        parkName: String,
    },
    mounted() {
        this.linksdetail()
        this.annualincome()
        this.industrypark()
    },
    beforeDestroy() {
    },
    watch: {
        parkName: function (newv, oldv) {
            console.log("aaaa", newv)
            this.linksdetail()
            this.annualincome()
            this.industrypark()
        },
    },
    methods: {
        linksdetail() {//产业链详情
            var params = {
                pageNum: 1,
                pageSize: 100,
                parkName: "敖镇综合产业园",
            }
            linksdetail(params).then((res) => {
                this.linksdetailData = res.list
            })
        },

        industrypark() {//产业分布
            let _this = this
            _this.industryparkTotal = 0
            var params = {
                parkName: this.parkName,
            }
            industrypark(params).then((res) => {
                _this.industryparkData = []
                res.forEach(item => {
                    _this.industryparkTotal += item.num
                    _this.industryparkData.push({value: item.num, name: item.industryName, proportion: item.proportion})
                    _this.industryparkxAxisData.push(item.industryName)
                })
                var redEcharts = require('echarts').init(this.$refs.detailsEcharts);
                var redoption = redEcharts.getOption();
                if (redoption) {
                    redEcharts.clear();
                    redEcharts.setOption(redoption);
                }
                _this.initDetails()
            })
        },
        annualincome() {//税收列表
            let _this = this
            _this.maxAnnualIncome = 0
            _this.industryparkxAxisData = []
            var params = {
                parkName: this.parkName,
                topSize: 100
            }
            annualincome(params).then((res) => {
                _this.annualincomeData = res
                _this.annualincomeData.forEach(item => {
                    if (item.annualIncome > _this.maxAnnualIncome) {
                        _this.maxAnnualIncome = item.annualIncome
                    }
                })
            })
        },
        initDetails() {//初始化详情图表
            var echarts = require('echarts');
            let option = {
                grid: {
                    left: "15%",
                    right: "10%",
                    bottom: "10%",
                    top: "12%",
                    containLabel: true,
                },
                backgroundColor: "",
                yAxis: {
                    type: "value",
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#ffffff",
                            fontSize: 8
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'line',
                            color: '#ffffff',
                            width: 0.1,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'line',
                            color: '#ffffff',
                            width: 0.5,
                        },
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 8
                            },
                        },
                        data: this.industryparkxAxisData,
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "bar",
                        itemStyle: {
                            normal: {
                                barBorderRadius: 0,
                                label: {
                                    show: true, //开启显示数值
                                    position: 'top', //数值在上方显示
                                    textStyle: {  //数值样式
                                        color: '#FFFFFF',   //字体颜色
                                        fontSize: 8  //字体大小
                                    },
                                    formatter: function (params) {
                                        if (params) {
                                            return (params.data.proportion) + '%'
                                        } else {//否则返回个空
                                            return '';
                                        }
                                    },
                                },
                            },
                        },
                        barWidth: 20,
                        data: this.industryparkData
                    },
                ],
            };
            echarts.init(this.$refs.detailsEcharts).setOption(option);
        },
    }
}
</script>


<style lang="scss">

.linksdetailContainer {
  width: 250px;
  height: 520px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.taxrevenue_scrollbar {
  width: 250px;
  height: 230px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .linksdetailContainer {
    height: calHeight_2k(520px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .taxrevenue_scrollbar {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}

</style>

<style lang="scss" scoped>
.dataAvailable{
    width:225px;
    height: 200px;
    margin-left: 20px;
    text-align: center;
    line-height: 200px;
    font-size: 14px;
    color: #999999;

}
.marginB20 {
  margin-bottom: 20px;
}

.marginT5 {
  margin-top: 5px;
}

.height251 {
  height: 251px;
}

.height351 {
  height: 330px;
}

.height600 {
  height: 590px;
}

.leftView {
  float: left;
  margin-top: 20px;
  height: 630px;
  display: flex;
  flex-direction: row;
  align-items: center;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    width: 265px;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_3_1.png");
    display: flex;
    flex-direction: column;

    &_title1 {
      width: 216px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title1.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title2 {
      height: 30px;
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;

      &_icon {
        width: 33px;
        height: 12px;
        background: #23A5F7;
        opacity: 0.39;
      }

      span {
        margin-left: 10px;
        margin-right: 10px;
        height: 30px;
        font-size: 10px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1CFDFF;
        line-height: 30px;
      }

    }

    &_details {
      display: flex;
      flex-direction: row;
      margin-left: 24px;

      &_title {
        font-size: 7px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 10px;
        color: #DBFBFF;
        opacity: 0.6;
      }

      &_contentC {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 180px;
      }

      &_content {
        font-size: 7px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #DBFBFF;
      }
    }

    &_taxrevenue {
      display: flex;
      flex-direction: column;
      margin-left: 23px;

      &_name {
        height: 20px;
        line-height: 20px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }

      &_num {
        margin-left: 8px;
        margin-right: 5px;
        height: 20px;
        line-height: 20px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #52FFFF;
      }


      &_base {
        position: relative;
        width: 200px;
        height: 8px;
      }

      &_all {
        position: absolute;
        height: 8px;
        border-radius: 4px;
      }
    }
  }
}

.line {
  width: 213px;
  height: 2px;
  margin-top: 12px;
  margin-left: 23px;
  background-size: 100% 100%;
  background-image: url("@/assets/icon_line.png");
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
    .dataAvailable{
        height: calHeight_2k(200px);
        line-height: calHeight_2k(200px);
    }
  .marginB20 {
    margin-bottom: calHeight_2k(20px);
  }

  .marginT5 {
    margin-top: calHeight_2k(5px);
  }

  .height251 {
    height: calHeight_2k(251px);
  }

  .height351 {
    height: calHeight_2k(330px);
  }

  .height600 {
    height: calHeight_2k(590px);
  }

  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);
    position: relative;
    z-index: 3;

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_title2 {
        height: calHeight_2k(30px);

        &_icon {
          height: calHeight_2k(12px);
        }

        span {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }

      }

      &_details {
        &_title {
        }

        &_content {
        }
      }

      &_taxrevenue {

        &_name {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }

        &_num {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }


        &_base {
          height: calHeight_2k(8px);
        }

        &_all {
          height: calHeight_2k(8px);
        }
      }
    }
  }

  .line {
    height: calHeight_2k(2px);
    margin-top: calHeight_2k(12px);
  }
  .detailsStyle {
    height: calHeight_2k(170px);
  }
}

.detailsStyle {
  width: 100%;
  height: 170px;
}
</style>